<template>
    <div id="center-follower" >
          <div class="cf-list" v-if="list">
            <div class="cf-item" v-for="(data,index) in list" :key="data.userId">
                <div class="cf-left" >
                     <router-link :to="{
                        name: 'CenterRecipes',
                        params: {
                          userId: data.userId
                        }
                      }">
                    <img :src="data.headImg" :onerror="errorImage" alt="">
                    </router-link>
                    <span class="cf-btn-has" @click="followFun(data.userId, index, $event)">{{data.follow}}</span>
                </div>
                <div class="cf-right">
                     <router-link :to="{
                        name: 'CenterRecipes',
                        params: {
                          userId: data.userId
                        }
                      }">
                    <h3>{{data.nickname}}</h3>
                    </router-link>
                    <router-link to="/centerPage/CenterRecipes">
                    <!-- <img src="https://i1.douguo.com/upload/note/d/a/a/da84247847aebe48d9dd0fcdac88862a.png" alt=""> -->
                    </router-link>
                    <p>粉丝{{data.fans}} </p>
                    <p>菜谱{{data.menuNum}}</p>
                </div>
            </div>
        </div>
        <el-empty :image-size="200" v-if="list.length === 0"></el-empty>
      <div class="page">
        <el-pagination
          class="pages"
          background
          layout="prev, pager, next"
          :total="pages.total"
          :hide-on-single-page="list.length < 12"
          :current-page="pages.current"
          :pager-count=5
          :page-size=12
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
</template>
<script>
import cookie from '../../../cookien'
export default {
  name: 'center-follower',
  data () {
    return {
      list: [],
      current_page: 1,
      total: '100',
      loading: true,
      // 分页
      pages: {
        // 每页十条，共几条
        total: 0,
        // 当前页数
        vals: 1,
        // 自定义第几页
        current: 1
      },
      errorImage: 'this.src="' + require('../../../assets/img/errorImg.png') + '"'
    }
  },
  methods: {
    getData () {
      this.loading = true
      this.$axios({
        url: '/Menu/Visitor/findMyFans',
        params: {
          userId: this.$route.params.userId,
          pageNow: this.pages.vals,
          pageSize: 12
        },
        headers: {
          token: cookie.getToken()
        }
      }).then(data => {
        if (data.data.code === 200) {
          console.log(data)
          this.pages.total = data.data.object.total
          this.list = data.data.object.list
          this.loading = false
          this.total = data.data.object.total
          for (let i = 0; i < this.list.length; i++) {
            this.judjeFun(this.list[i].userId, i)
          }
          this.userInfo = data.data.object
        }
      }).catch(error => {
        console.log(error)
      })
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.current_page = val
      this.getData()
    },
    judjeFollow (userOneId, userTwoId) {
      return new Promise((resolve, reject) => {
        this.$axios({
          url: '/Menu/User/judgeOfAttention',
          method: 'post',
          params: {
            userOneId,
            userTwoId
          },
          headers: {
            token: cookie.getToken()
          }
        }).then(data => {
          if (data.data.code === 200) {
            resolve(data.data.object)
          } else {
            this.$message(data.message)
          }
        }).catch(err => {
          console.log(err.toString())
          reject(err)
        })
      })
    },
    async judjeFun (key, index) {
      try {
        const mySelf = await this.judjeFollow(this.$store.state.userMsg.userId, key)
        const otherSelf = await this.judjeFollow(key, this.$store.state.userMsg.userId)
        if (mySelf === 1 && otherSelf === 1) {
          this.$set(this.list[index], 'follow', '互相关注')
        } else if (mySelf === 1 && otherSelf !== 1) {
          this.$set(this.list[index], 'follow', '已关注')
        } else {
          this.$set(this.list[index], 'follow', '+ 关注')
        }
      } catch (err) {
        console.log(err)
      }
    },
    followFun (key, index, e) {
      this.$axios({
        method: 'post',
        url: '/Menu/User/attention',
        params: {
          userOneId: this.$store.state.userMsg.userId,
          userTwoId: key
        }
      }).then(data => {
        if (data.data.code === 200) {
          this.$message({
            message: data.data.message,
            type: 'success'
          })
          this.judjeFun(key, index)
          // if (e.target.innerHTML === '互相关注') {
          //   this.list[index].follow = '+ 关注'
          //   this.$message('已取消关注')
          // } else {
          //   this.list[index].follow = '互相关注'
          //   this.$message('已关注')
          // }
          this.$set(this.list, index, this.list[index])
          this.$emit('changeInfo')
        } else {
          this.$message({
            message: data.data.message,
            type: 'warn'
          })
        }
      }).catch(error => {
        console.log(error.toString())
      })
    }
  },
  mounted () {
    this.getData()
    console.log(this.$store.state.userMsg.userId)
    console.log(this.$route.params.userId)
  }
}
</script>

<style lang="less" scoped>
.pageControl{
  text-align: center;
  margin-top: 40px !important;
}
.cf-list{
    width: 100%;
    height:auto;
    margin-top: 20px;
    display: grid;
    min-height: 100px;
    grid-template-columns: repeat(3,236px);
    place-content: space-around space-between;
    .cf-item{
        overflow: hidden;
        margin-top:20px;
        .cf-left{
            float: left;
            width: 80px;
            height:100%;
            text-align: center;
            img{
                width: 64px;height: 64px;
                margin: 0 auto;
                border-radius: 32px;
            }
            .cf-btn-has{
                display: inline-block;
                width: 80px;
                margin-top: 14px;
                height:30px;
                line-height:28px;
                border-radius: 4px;
                border: 1px solid #333;
                color:#333;
                font-size: 12px;
                text-align: center;
                &:hover{
                    color: #F4B644;
                    border-color: #F4B644;
                    cursor: pointer;
                }
            }
        }
        .cf-right{
            float: left;
            margin-left: 20px;
            h3{
                font-size: 15px;
                font-weight: bold;
                color: #333;
                margin-top:6px;
                max-width:110px;
                display:inline-block;
                text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
                &:hover{
                    color: #F4B644;
                }
            }
            img{
                margin:10px 5px 0 3px;width:16px;height:16px;vertical-align:middle;
                float: right;
            }
            p{
                margin-top: 24px;
                font-size: 13px;
                line-height: 13px;
                color: #999;
            }
        }
    }
}
</style>
